<template>
	<div>
	<div class="loadmore-container" ref="publicWrapper">
    <div class="loadmore-ul">	
		<div class="shuoshuo-new" v-if="isdataempty==true">
        <span class="yl-2kong nosvg">
            <span class="path1">
              <span class="path2">
                <span class="path3">
                  <span class="path4">
                    <span class="path5">
                      <span class="path6">
                        <span class="path7">
                          <span class="path8">
                            <span class="path9"></span>
                          </span>
                        </span>
                      </span>
                    </span>
                  </span>
                </span>
              </span>
            </span>
        </span>
        <span class="no-text">还没有相关内容哦，快去跟大家互动吧！</span>
    </div>
        <div class="hot-shuohsuo">

          <div style="background-color: white;" v-for="(item,index) in commentlist" :key="index">
            <hotheader :commentindex="index" :type="1" :nickname="item.name" :saytime="item.timeStamp" :avatarimg="item.head"
                       @topiccommentdetail="tosaycomdet" :place="item.place" :ssshow='item.isRecommend==1' :userType="item.userType" :isTalent="item.isTalent" :pendantType="item.pendantType" :pendantPicUrl="item.pendantPicUrl"></hotheader>
            <commentbody :commentindex="index" :commenttype="null" @replycomment="tosaycomdet" :commenttext="item.content"
                         :piclength="item.picture.length"  :picarray="item.picture" @showImg="popupImg"></commentbody>
            <thubm-up :topiccommentnum="item.commentNumber" :thumbupnum="item.likes" :commentindex="index" :isup="item.isgood"
                       @thumbup="saythumbup" @commentsvgg="saycomment"></thubm-up>
          </div>
        </div>
    </div>
	</div>
   <transition name="fade">
      <div class="modal-img" v-if="popupVisible" @click="popupVisible=false">
        <mt-swipe :auto="100000" style="width: 100%;height: 100vh;position:relative;"
        :continuous="false" 
          :defaultIndex="swiperIndex" :showIndicators="false" >
            <mt-swipe-item v-for="(item,index) in popImg" :key="index" style="height:100vh" >
              <img v-lazy="item" class="swiper-img" />
            </mt-swipe-item>
          </mt-swipe>
        </div>
    </transition>
	</div>
</template>
<script>
import { Toast,Indicator } from "mint-ui";
import hotheader from "src/components/allhot-header.vue";
import commentbody from "src/components/comment-detail-body.vue";
import thubmUp from "src/components/thumb-up.vue"; 
import api from "src/api/index";
export default {
  data() {
    return {
      swiperIndex:0,
      popupVisible:false,
      popImg:'',
      commentlist: [],
      isdataempty:false,
      preventRepeatReuqest: false,
      loadmoredata: false,
      page: 1,
      totalPage: 0,
      hasmore: true,
      is_r: false,
      currPage: 0,
      msg: "我发布的说说"
    };
  },
  mounted() {
    Indicator.open("加载中...");
    let params = { limit: 10, page: 1, publishType: 1 };
    this.getMyReleasedSay(params)
      .then(data => {
        return this.initScroll();
      })
      .then(data => {
        this.$nextTick(() => {
          this.myscroll.refresh();
        });
        let loadmore = document.getElementsByClassName("loadmore-ul");
        if (
          "detail2publicTalk" == localStorage.turnCount &&
          loadmore.length > 0
        ) {
          setTimeout(() => {
            loadmore[0].style.transform = localStorage.turnBackPublicTalk;
          }, 0);
          localStorage.turnCount = "";
          Indicator.close();
        }
      });
  },
  methods: {
    //显示图片
    popupImg(data,index){
      this.swiperIndex = index
      if(typeof data == 'string'){
        data = data.split(',')
      }
       //console.log(data,index)
      this.popImg = data;
      this.popupVisible = true;
      // console.log(this.swiperOne)
      // this.swiperOne.slideTo(index)
    },
    //查询我发布的说说
    getMyReleasedSay(params) {
      let p = new Promise((resolve, reject) => {
        if ("detail2publicTalk" == localStorage.turnCount) {
          Indicator.close();
          let publickTalkObj = JSON.parse(localStorage.publicTalkStorage);
          this.commentlist = publickTalkObj.commentlist;
          this.currPage = publickTalkObj.currPage;
          this.totalPage = publickTalkObj.totalPage;
          this.is_r = false;

          resolve(true);
        } else {
          params.page = this.currPage + 1;
          api.QueryMypublish(params).then(res => {
            if (res.success) {
              Indicator.close();
							let list = res.data.list;
              this.commentlist = [...this.commentlist, ...list];
              if(this.commentlist.length==0){
                  this.isdataempty=true
              }else{
                this.isdataempty=false
              }
							this.picAutoOrient(this.currPage);
              this.currPage = res.data.currPage;
              this.totalPage = res.data.totalPage;
              if (this.currPage < this.totalPage) {
                this.is_r = false;
              }
              this.$nextTick(() => {
                if (this.myscroll) this.myscroll.refresh();
              });

              let publickTalkObj = JSON.stringify({
                commentlist: this.commentlist,
                currPage: this.currPage,
                totalPage: this.totalPage
              });
              localStorage.publicTalkStorage = publickTalkObj;
              resolve("我发布的说说...");
            }
          });
        }
      });
      return p;
    },
    //初始化scroll
    initScroll() {
      let p = new Promise((resolve, reject) => {
        this.$nextTick(() => {
          let publicWrapper = this.$refs.publicWrapper;
          this.setScroll(publicWrapper, this);
        });
        resolve("初始化scroll结束...");
      });
      return p;
    },
    setScroll(publicWrapper, _this) {
      _this.myscroll = new iScroll(publicWrapper, {
        //上拉时触发
        onScrollMove: function() {
          if (
            this.y <= this.wrapperH - this.scroller.clientHeight - 50 &&
            _this.is_r == false
          ) {
            //加载数据
            _this.is_r = true;
            let params = { limit: 10, page: 1, publishType: 1 };
            _this.getMyReleasedSay(params);
          }
        },
        onScrollEnd: function() {}
      });
    },
    saythumbup(data) {
      const params = {
        saysId: this.commentlist[data.commentindex].saysId,
        createSaysUserId: this.commentlist[data.commentindex].userId
      };
      if (this.commentlist[data.commentindex].isgood == 0) {
        api.Querysaythumbup(params).then(res => {
          if (res.success) {
            this.commentlist[data.commentindex].isgood = !this.commentlist[
              data.commentindex
            ].isgood;
            this.commentlist[data.commentindex].likes += 1;
          }
        });
      } else if (this.commentlist[data.commentindex].isgood == 1) {
        api.Querysaycanclethumbup(params).then(res => {
          if (res.success) {
            this.commentlist[data.commentindex].isgood = !this.commentlist[
              data.commentindex
            ].isgood;
            this.commentlist[data.commentindex].likes -= 1;
          }
        });
      }
    },
    saycomment(data) {
      this.$router.push({
        path: "/shuodetail",
        query: { saysId: this.commentlist[data.commentindex].saysId }
      });
    },
    tosaycomdet(data) {
      console.log("说说详情...");
      this.getTransformState();
      localStorage.turnCount = "detail2publicTalk";
      this.$router.push({
        path: "/shuodetail",
        query: {
          saysId: this.commentlist[data.commentindex].saysId,
          userId: this.commentlist[data.commentindex].userId
        }
      });
    },
    //获取跳转前的位置
    getTransformState() {
      let loadmore = document.getElementsByClassName("loadmore-ul");
      if (loadmore.length > 0) {
        localStorage.turnBackPublicTalk = loadmore[0].style.transform;
      }
    },
    //图片自动旋转参数
    picAutoOrient(data) {
      for (var m = data*10; m < this.commentlist.length; m++) {
        for (var n = 0; n < this.commentlist[m].picture.length; n++) {
          this.commentlist[m].picture[n].src =
            this.commentlist[m].picture[n].src + "?imageMogr2/auto-orient";
        }
      }
    }
  },
  mixins: [],
  components: {
    thubmUp,
    hotheader,
    commentbody
  }
};
</script>
<style lang="less" scoped>
.modal-img{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  position: fixed;
  top:0;
  left: 0;
  z-index: 9999;
  img{
    width: 80%;
    position: absolute;
    top:50%;
    left: 10%;
    transform: translateY(-50%);
  }
}
.loadmore-container {
  height: 95vh;
  overflow: hidden;
  margin: 0 auto;
}
.loadmore-ul {
  padding-bottom: 1.2rem;
  list-style: none;
}
</style>